<template>
  <view class="k-tabbar" :style="{ background: tabbar.backgroundColor }">
    <view class="k-tabbar-content">
      <view
        class="k-tabbar-item"
        @click="changeTabbar(index)"
        v-for="(item, index) in tabbar.list"
        :key="item.pagePath"
      >
        <image
          :src="index === current ? item.selectedIconPath : item.iconPath"
          mode="heightFix"
          :style="{ height: item.iconHeight || 36 + 'rpx' }"
        ></image>
        <text
          class="k-tabbar-text"
          :style="{
            color: current === index ? tabbar.selectedColor : tabbar.color,
          }"
          >{{ item.text }}</text
        >
      </view>
    </view>
    <uv-safe-bottom></uv-safe-bottom>
  </view>
  <view>
    <view class="k-tabbar-content"></view>
    <uv-safe-bottom></uv-safe-bottom>
  </view>
</template>

<script setup>
import { reactive, ref, onMounted, computed } from 'vue';
import { storeToRefs } from "pinia";
import TOOL from '@/utils';
import { useUserStore } from "@/store";
import CONFIG from "@/config.mjs";
// 引入
import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
// #ifdef MP-JD || MP-WEIXIN
uni.hideHomeButton();
// #endif
uni.hideTabBar();

const userStore = useUserStore();
const { isBusiness } = storeToRefs(userStore);
const current = ref(0);
const emits = defineEmits(['change']);
onMounted(() => {
  const pageCurrent = getCurrentPages();
  const route = `/${pageCurrent[0].route}`;
  if (route) {
    const index = tabbar.list.findIndex((item) => item.pagePath === route);
    if (index > -1) {
      current.value = index;
    }
  }
});
const tabbarList = computed(() => {
  if (isBusiness.value) {
    return [
      {
        pagePath: "/pages/index/index",
        iconPath: TOOL.url("/business/tabbar/index.png"),
        selectedIconPath: TOOL.url("/business/tabbar/index_active.png"),
        text: "订餐管理",
        openType: "switchTab",
      },
      {
        pagePath: "/pages/manage/manage",
        iconPath: TOOL.url("/business/tabbar/manage.png"),
        selectedIconPath: TOOL.url("/business/tabbar/manage_active.png"),
        text: "餐厅管理",
        openType: "switchTab",
      },
      {
        pagePath: "/pages/ucenter/ucenter",
        iconPath: TOOL.url("/business/tabbar/ucenter.png"),
        selectedIconPath: TOOL.url("/business/tabbar/ucenter_active.png"),
        text: "我的",
      },
    ];
  }
  return [
    {
      pagePath: "/pages/index/index",
      iconPath: TOOL.url("/customer/tabbar/index.png"),
      selectedIconPath: TOOL.url("/business/tabbar/index_active.png"),
      text: "订餐",
      openType: "switchTab",
    },
    {
      pagePath: "/pages/ucenter/ucenter",
      iconPath: TOOL.url("/customer/tabbar/ucenter.png"),
      selectedIconPath: TOOL.url("/business/tabbar/ucenter_active.png"),
      text: "我的",
    },
  ];
});
const tabbar = reactive({
  color: "#BFBFBF",
  selectedColor: CONFIG.SUN_BASE_COLOR,
  backgroundColor: "#ffffff",
  list: tabbarList,
});

function changeTabbar(index) {
  throttle(() => {
    console.log(index);
    if (current.value === index) return;
    const item = tabbar.list[index];
    if (item.pagePath) {
      switch (item.openType) {
        case 'switchTab':
          uni.switchTab({
            url: item.pagePath,
          });
          break;
        case 'navigate':
          uni.navigateTo({
            url: item.pagePath,
          });
          break;
        case 'redirectTo':
          uni.redirectTo({
            url: item.pagePath,
          });
          break;
        default:
          uni.switchTab({
            url: item.pagePath,
          });
          break;
      }
    } else {
      emits('change', index);
      current.value = index;
    }
  }, 500);
}
</script>

<style scoped lang="scss">
.k-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  background-color: #ffffff;
  box-shadow: 0rpx -4rpx 20rpx 0rpx rgba(200, 200, 200, 0.1);
  .k-tabbar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10rpx;
    flex: 1;
    .k-tabbar-text {
      font-size: $other-font-size;
    }
  }
}
.k-tabbar-content {
  height: 100rpx;
  display: flex;
  align-items: center;
}
</style>
